<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	<input id="kw" type="text" name="keyword" />
	<table id="result"></table>

	<script type="text/javascript">

		window.onload = function() {
			var kwInput = document.getElementById("kw");
			var rsTable = document.getElementById("result");

			function tableOperator(table, data) {
				var obj = {};
				obj.createTable = function() {
					table.innerHTML = "";
					data.forEach((item) => {
						var tr = document.createElement("tr");
						tr.innerHTML = item.area;
						table.appendChild(tr);
					});
				}
				return obj;
			}

			kwInput.addEventListener("input", function() {
				var xhr = new XMLHttpRequest();
				xhr.open("GET", "area/search?kw=" + encodeURIComponent(kwInput.value));
				xhr.onreadystatechange = function() {
					if (xhr.status === 200 && xhr.readyState === 4) {
						var tableOp = tableOperator(rsTable, JSON.parse(xhr.responseText));
						tableOp.createTable();
					}
				}
				xhr.send();
			});
		}
	</script>
</body>
</html>